<script setup lang="ts">
import { getQuestion, putQuestion } from '@/api/modules/ad';
import appConfig from '@/config/app'
import { isWeChatBrowser } from '@/utils/platform';
import { reactive, ref, nextTick,defineProps, onMounted } from 'vue';
    const emit = defineEmits(['submit'])
    const props = defineProps<{
        templateInfo?: any
    }>()
    const err=ref(false)
    const userAnswers:any=reactive({
        wechatNickname:'',
        wechatAvatarUrl:'',
        curCount:0,  //当前回答到第几个问题
        q_len:1, //问题个数
    })
    const questionData=ref<any>({})
    
    // 获取qs元素的引用
    const qsRef = ref<HTMLElement | null>(null);
    const getDes=async ()=>{
        const res= await getQuestion(props.templateInfo?.toolHomeworkId)
        questionData.value=res?.data||{}
        userAnswers.q_len=res?.data?.questionList.length
    }
    // 滚动到底部方法
    const scrollToBottom = () => {
        nextTick(() => {
            if (qsRef.value) {
                qsRef.value.scrollTop = qsRef.value.scrollHeight;
            }
        });
    };
    
    const selectOption=(item:any,idx:number)=>{
        userAnswers['curCount']=idx+1
        questionData.value.questionList[idx].answer=item
        scrollToBottom();
    }
    
    const submit = async () => {
        const params={
            toolHomeworkId:props.templateInfo?.toolHomeworkId,
            questionInfo:questionData.value.questionList
        }
        await putQuestion(params)
        emit('submit')
    }
    onMounted(()=>{
        if(localStorage.getItem(appConfig.TOKENNAME)){
            const userInfo=JSON.parse(localStorage.getItem('userInfo')||'{}')
            userAnswers.wechatNickname=userInfo?.wechatNickname||''
            userAnswers.wechatAvatarUrl=userInfo?.wechatAvatarUrl||''
            getDes()
        }else{
            if(!isWeChatBrowser()){
                err.value=true
            }
        }
        
    })
</script>

<template>
    <div class="qs" ref="qsRef">
        <!-- 欢迎消息 -->
        <div class="message-item assistant-message" v-if="questionData?.openText">
            <div class="avatar">
                <img src="/img/avatar.png" class="avatar-img"></img>
            </div>
            <div class="message-bubble">
                <div class="message-text-box">
                    <span class="message-text">{{questionData?.openText||''}}</span>
                </div>
            </div>
        </div>

        <!-- 问题 -->
        <div class="mBox" v-for="(item,idx) in questionData.questionList" :key="`q_${idx}`">
            <div v-if="idx<=userAnswers.curCount">
                <div class="message-item assistant-message" v-if="item.questionText">
                    <div class="avatar">
                        <img src="/img/avatar.png" class="avatar-img"></img>
                    </div>
                    <div class="message-bubble">
                        <div class="message-text-box"><span class="message-text">{{item.questionText}}</span></div>
                    </div>
                </div>

                <!-- 选项按钮 -->
                <div class="options-container">
                    <div class="option-button" v-for="(optionItem,idx2) in item.optionList" :key="`o_${idx2}`" @click="selectOption(optionItem,idx)">
                        <span class="option-text">{{optionItem.optionText}}</span>
                    </div>
                </div>

                <!-- 用户回答 -->
                <div class="message-item user-message" v-if="item.answer">
                    <div class="message-bubble">
                        <div class="message-text-box"><span class="message-text">{{ item.answer.optionText }}</span></div>
                    </div>
                    <div class="avatar">
                        <img :src="userAnswers.wechatAvatarUrl" class="avatar-img"></img>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="next-btn" v-if="userAnswers.curCount>=userAnswers.q_len" @click="submit">下一步</div>
        <div class="err" v-if="err">请在微信中打开</div>
    </div>
    
</template>

<style scoped lang="scss">
    .qs {
        width: 100%;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        overflow-y: scroll;
        z-index: 999;
        background-color: #f5f5f5;
        padding: 15px;
        padding-bottom: 50px;
        box-sizing: border-box;
        .mBox{
            height: auto;
            overflow: hidden;   
        }
        .message-item {
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
            
            .avatar {
                width: 40px;
                height: 40px;
                
                overflow: hidden;
                flex-shrink: 0;
                .avatar-img {
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    vertical-align: top;
                    border-radius: 50%;
                }
            }
            .message-bubble {
                max-width: 70%;
                margin: 0 10px;
                line-height: 0;
                .message-text-box{
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
                    background: #fff;
                    padding: 12px 16px;
                    border-radius: 10px;
                    height: auto;
                    overflow: hidden;
                    .message-text {
                        font-size: 14px;
                        line-height: 28px;
                        word-wrap: break-word;
                        display: inline-block;
                        vertical-align: top;
                    }
                }
                
            }
            &.assistant-message {
                justify-content: flex-start;
                .message-bubble {
                    .message-text-box{
                        background-color: #fff;
                        color: #333;
                    }
                    
                }
            }
            &.user-message {
                justify-content: flex-end;
                .message-bubble {
                    .message-text-box{
                        background: #ffb3d9;
                        color: #333;
                    }
                }
            }
            
        }
        .options-container {
            padding: 10px 0 15px;
            height: auto;
            overflow: hidden;
            box-sizing: border-box;
            .option-button {
                width: 100%;
                background-color: #fff;
                border: 2px solid #e0e0e0;
                border-radius: 10px;
                text-align: center;
                transition: all 0.3s ease;
                box-sizing: border-box;
                line-height: 0px;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0px;
                }
                .option-text {
                    font-size: 16px;
                    line-height: 40px;
                    color: #666;
                    transition: color 0.3s ease;
                    &.selected-text {
                        color: #007AFF;
                        font-weight: 500;
                    }
                }
                &.selected {
                    border-color: #007AFF;
                }
                &:active {
                    transform: scale(0.98);
                }
            }
        }
        .next-btn{
            background: #d32602;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            position: fixed;
            left: 0;
            bottom: 0;
        }
        .err{
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            font-size: 18px;
            text-align: center;
        }
    }
</style>